
<% content_for :main_div do %>
  <div id="app" class="register">
<% end %>
    <div class="users-new">
        <div class="row">
          <div class="col-xs-2" style="width: 10%;">
            <a href="/">
               <i class="icon-logo" style="display:block;margin-top: 50px;margin-left:80px;font-size: 50px;"></i>
            </a>
          </div>
        </div>
        <div class="new-form">
            <div class="form-header">
                <div>
                    <a href="/sign_in">登录</a>
                </div>
                <span style="font-size:24px;margin-top: 5px;color:#969696;">·</span>
                <div>
                    <a href="/sign_up" class="active">注册</a>
                </div>
            </div>
            <div class="form-content">
              <vue-form :state="formstate" v-model="formstate" @submit.prevent="onSubmit" action="/users" method="POST">

                <div class="form-group">
                    <%= flash_messages %>
                </div>

                <div class="row margin-reset form-new-user">
                  <div class="form-group">
                      <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)">
                        <div class="col-xs-8 padding-reset">
                          <i class="icon-sign-in-user input-icon"></i>
                          <input type="text" name="user[mobile]" class="form-control private-input" required v-model.lazy="cellphone" placeholder="您的手机号码" aria-describedby="phone" cellphone-validator>
                        </div>
                        <div class="col-xs-4 padding-reset">
                          <cellphone-code type="uniq"></cellphone-code>
                        </div>

                        <field-messages name="user[mobile]" show="$touched || $submitted" class="col-xs-12 padding-reset error" style="margin-bottom: 10px;">
                          <div slot="required">请输入手机号</div>
                          <div slot="cellphone-validator">请输入正确的手机号</div>
                        </field-messages>
                      </validate>
                  </div>
                </div>

                <div class="form-group form-new-user">
                  <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)">
                    <i class="icon-sign-in-safe input-icon"></i>
                    <input type="text" name="user[sms_code]" class="form-control private-input" required v-model.lazy="model.smsCode" placeholder="验证码">

                    <field-messages auto-label name="user[sms_code]" show="$touched || $submitted" class="error">
                      <div slot="required">请输入短信验证码</div>
                    </field-messages>

                  </validate>
                </div>

                <div class="form-group form-new-user">
                  <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)">
                    <i class="icon-sign-in-password input-icon"></i>
                    <input type="password" name="user[password]" class="form-control private-input" required v-model.lazy="model.password" minlength="6" placeholder="密码">

                    <field-messages auto-label name="user[password]" show="$touched || $submitted" class="error">
                      <div slot="required">请输入密码</div>
                      <div slot="minlength">密码至少6位</div>
                    </field-messages>
                  </validate>
                </div>

                <div class="form-group form-new-user">
                  <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)"  :custom="{passwordConfirmationValidator: passwordConfirmationValidator}">
                    <i class="icon-sign-in-password input-icon"></i>
                    <input type="password" name="user[password_confirmation]" class="form-control private-input" required v-model.lazy="model.passwordConfirmation" placeholder="确认密码">

                    <field-messages auto-label name="user[password_confirmation]" show="$touched || $submitted" class="error">
                      <div slot="required">请再次输入密码</div>
                      <div slot="passwordConfirmationValidator">请确认两次密码输入一致</div>
                    </field-messages>
                  </validate>
                </div>

                <div class="form-group form-new-user">
                  <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)">
                    <div class="input boolean optional user_term_of_service">
                      <input name="user[term_of_service]" type="hidden" value="0">
                      <input class="boolean optional" type="checkbox" value="1" checked="checked" name="user[term_of_service]" required v-model.lazy="model.agreement">
                      <label class="boolean optional" style="color: #969696;font-weight: initial;font-size:1.2rem;" for="user_term_of_service">&nbsp;&nbsp;我同意并遵守<a class="color-private" href="/agreement.html">《阳毅商城服务协议》</a></label>
                    </div>
                    <field-messages auto-label name="user[term_of_service]" show="$touched || $submitted" class="error">
                      <div slot="required">请同意注册协议</div>
                    </field-messages>
                  </validate>
                </div>

                <div class="form-group form-new-user">
                  <% unless params[:invite_token].blank? %>
                  <%= f.hidden_field :sys_invite_token, :value => params[:invite_token] %>
                  <input type="hidden" name="user[on_mobile]" value="true">
                  <% end %>
                  <%= hidden_field_tag :authenticity_token, form_authenticity_token -%>
                  <button class="btn btn-primary btn-block private-btn">立即注册</button>
                   <!--private-btn btn-block submit-button-->
                </div>
            </vue-form>
        </div>
    </div>
</div>
